<template>
	<scroll-view class="nav-bar" scroll-x>
		<view v-for="(item, index) in navList" :key="index" class="nav-item"
			:class="{ 'active': activeNavIndex === index }" @tap="switchNav(index)">
			{{ item }}
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "clock-scoll",
		props: {
			navList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				activeNavIndex: 0,
			}
		},
		methods: {
			switchNav(index) {
				this.activeNavIndex = index
			},
		}
	}
</script>

<style>
	.nav-bar {
		width: 100%;
		padding: 20upx 0;
		white-space: nowrap;
		/* 禁止换行 */
		overflow-x: auto;
		/* 横向滚动 */
		-webkit-overflow-scrolling: touch;
		/* 支持iOS平台的滚动加速 */
	}

	.nav-item {
		display: inline-block;
		padding: 10upx 20upx;
		font-size: 32rpx;
		color: #999;
		cursor: pointer;
	}

	.nav-item.active {
		color: #333;
		font-weight: bold;
	}
</style>